<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
//控制新增车辆弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('新增用户');
//定义数组保存车辆列表信息
const userArr = ref([]);
//定义对象保存查询条件 品牌 车牌号
const searchUserForm = ref({username: '', status: ''});
// 获取当前登录用户
const user = ref(getUser());
const initSaveUserForm = {
  username:'',
  name:'',
  phone:'',
  status:'',
  department:'',
  job:''
}
const saveUserForm = ref(JSON.parse(JSON.stringify(initSaveUserForm)));
onMounted(()=> {
  loadUser();//一进入页面就需要加载用户列表
});
const resetSearch = ()=>{
  searchUserForm.value = {username: '', status: ''};
  loadUser();
}
//加载车辆数据
const loadUser = ()=>{
  let data = qs.stringify(searchUserForm.value);
  // GET请求，将query param拼接到url上
  axios.get(BASE_URL+'/v1/user/listUser?' + data).then((response)=>{
    if (response.data.code === 2000){
      userArr.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
const openDialog = () => {
  dialogVisible.value = true;
  dialogTitle.value = '新增用户';
}
//定义保存用户的方法
const saveUser = ()=>{
  let data = qs.stringify(saveUserForm.value);
  console.log(data);
  // post请求将query param放到参数里。
  axios.post(BASE_URL + '/v1/user/saveUser', data)
      .then((response)=>{
        if (response.data.code === 2000){
          ElMessage.success('保存成功!');
          dialogVisible.value=false;
          saveUserForm.value={};
          loadUser();
        } else {
          ElMessage.error(response.data.msg);
        }
      })
}
//实现关闭功能
const handleClose = ()=>{
  if (confirm('确认关闭本窗口?')) {
    dialogVisible.value = false;
    saveUserForm.value = {};
  }
}
//编辑用户
const editUser = (id) => {
  dialogVisible.value=true;//显示弹窗
  dialogTitle.value='编辑用户';//编辑用户
  //请求当前要编辑的用户信息
  axios.get(BASE_URL+'/v1/user/listUser?id='+id).then((response) => {
    if (response.data.code === 2000){
      //将请求到的车辆数据回显在弹窗表单中
      saveUserForm.value = response.data.data[0];
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
// 用户状态转换
const statusFormatter = (row, column, cellValue, index)=>{
  if (cellValue === 'NORMAL') {
    return '启用';
  } else if (cellValue === 'DISABLE') {
    return '禁用';
  }
  return cellValue;
}
const disableUser = (id) => {
  axios.post(BASE_URL + "/v1/user/" + id + "/disable").then(
      (response) => {
        if (response.data.code === 2000) {
          loadUser();
        } else {
          ElMessage.error(response.data.msg);
        }
      }
  )
}
const enableUser = (id) => {
  axios.post(BASE_URL + "/v1/user/" + id + "/enable").then(
      (response) => {
        if (response.data.code === 2000) {
          loadUser();
        } else {
          ElMessage.error(response.data.msg);
        }
      }
  )
}
</script>

<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">用户管理</span>
    <el-button @click="openDialog" type="primary" style="float:right;margin-top:13px;">新增用户</el-button>
  </div>
  <!-- 新增用户弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" :before-close="handleClose"
             style="width:800px;padding:20px;">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input :readonly="saveUserForm.id != null" v-model="saveUserForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名">
            <el-input v-model="saveUserForm.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="电话">
            <el-input v-model="saveUserForm.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门">
            <el-input v-model="saveUserForm.department"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="职位">
            <el-input v-model="saveUserForm.job"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-radio-group v-model="saveUserForm.status">
              <el-radio-button value="NORMAL">启用</el-radio-button>
              <el-radio-button value="DISABLE">禁用</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveUser">确定</el-button>
    </template>
  </el-dialog>
  <!-- 用户搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true" label-width="80px">
      <el-form-item label="用户名" style="width:200px;">
        <el-input placeholder="请输入内容" style="width:220px;"
                  v-model="searchUserForm.username"></el-input>
      </el-form-item>
      <el-form-item label="用户状态" style="width:200px;">
        <el-select placeholder="请选择" v-model="searchUserForm.status">
          <el-option label="启用" value="NORMAL"/>
          <el-option label="禁用" value="DISABLE"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadUser">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 用户列表 -->
  <el-card style="margin:20px;">
    <el-table :data="userArr">
      <el-table-column type="index" label="编号" width="60" align="center"/>
      <el-table-column prop="username" label="用户名" width="80" align="center"/>
      <el-table-column prop="name" label="名字" align="center"/>
      <el-table-column prop="phone" label="手机号" width="120" align="center"/>
      <el-table-column prop="status" label="用户状态" align="center" :formatter="statusFormatter"/>
      <el-table-column prop="department" label="部门" align="center"/>
      <el-table-column prop="job" label="职位" align="center"/>
      <el-table-column prop="ctime" label="创建时间" width="160" align="left"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editUser(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" v-if="scope.row.status !== 'NORMAL'"
                     @click="enableUser(scope.row.id)">启用</el-button>
          <el-button link type="primary" size="small" v-if="scope.row.status === 'NORMAL'"
                     @click="disableUser(scope.row.id)">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style scoped>

</style>